﻿@using System.Collections
@using Telerik.Web.Mvc.UI
@using Helena.Areas.Productos.Models
@using Helena.Areas.Configuraciones.Models
@using Helena.Areas.Categorias.Models

@model IEnumerable<DetalleProductoView>  

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
        
@{
    ViewBag.Title = "Sub Productos";
    Layout = "~/Views/Shared/_Layout.cshtml";
    ProductoView PS = (ProductoView)ViewData["ProductoSeleccionado"];
}

@Html.Telerik().ScriptRegistrar().Globalization(true)


<script type="text/javascript">
    var Nombre;
    function onRowSelected(e) {
        var ordersGrid = $('#Productos').data('tGrid');
        Nombre = e.row.cells[0].innerHTML;
        $('#CategoriaNombre').text(Nombre);
        ordersGrid.rebind();

        var detallesGrid = $('#Detalles').data('tGrid');
        detallesGrid.rebind();
    }

    function onDataBinding(e) {
        e.data = $.extend(e.data, { CategoriaNombre: Nombre });
    }
</script> 

<div class="block big">
    <!-- Block Begin -->
    <!--Datos del comproducto compuesto -->
<table style="width:100%">
    <tr>
        <th>Producto Compuesto:</th>
        <td>@PS.Descripcion</td>
        <th>Unidad:</th>
        <td>@( Html.Telerik().ComboBox().Name("unidadID").AutoFill(true).SelectedIndex(PS.unidadID).BindTo(new SelectList((ICollection<UnidadView>)ViewData["Unidades"], "ID", "Descripcion")).HtmlAttributes(new { style = string.Format("width:{0}px", 100) }).HighlightFirstMatch(true).OpenOnFocus(true))</td>
        <th>Estado:</th>
        <td>@(PS.Estado ? "Activo" : "No Activo")</td>
        <th>Precio de Fabrica:</th>
        <td>S/. @PS.preciofabrica</td>
        <th>Precio de Venta:</th>
        <td>S/. @PS.precioventa</td>
        <th>Cantidad:</th>
        <td>@PS.cantidad</td>
    </tr>
</table>

<table style="width:100%">
    <tr>
        <td>
            <h3>Categorias</h3>
            @(Html.Telerik().Grid((IEnumerable<CategoriaView>)ViewData["Categorias"])
            .Name("Categorias")
            .Columns(columns =>
            {
                columns.Bound(c => c.NombreCategoria).Width(20);
            })
            .DataBinding(dataBinding => dataBinding.Ajax().Select("ObtenerCategoria", "DetalleProducto"))
            .Filterable()
            .Pageable()
            .Sortable()
            .Selectable()
            .Scrollable(scrolling => scrolling.Height(200))
            .ClientEvents(events => events.OnRowSelect("onRowSelected"))
            
            .RowAction(row => 
            {
                row.Selected = row.DataItem.ID.Equals(ViewData["CategoriaNombre"]);
            })

            )
        </td>
        <td>
            <h3>Productos </h3>
            @(Html.Telerik().Grid((IEnumerable<ProductoView>)ViewData["Productos"])
            .Name("Productos")
            .Localizable("es-ES")
            .DataKeys(keys => keys.Add(c => c.ID))
                            .Editable(editing => editing
                                    .Mode(GridEditMode.PopUp)
                                    .TemplateName("DetalleProductoTemplate"))
                                    .HtmlAttributes(new { style = "position: relative, top: 50%, left: 60%, width: 900px" }) 
            .Columns(columns=>
            {
                columns.Bound(c => c.Descripcion).Width(150);
                columns.Bound(c => c.cantidad).Width(40).Title("Cantidad");
                columns.Command(commands =>
                {
                    commands.Edit().ButtonType(GridButtonType.BareImage);
                }).Width(80).Title("Agregar");
            })
            .DataBinding(dataBinding => dataBinding
                .Ajax()
                .Select("ObtenerProductos", "DetalleProducto", new { CategoriaNombre = "Basicos" })
                .Update("InsertarDetalle", "DetalleProducto"))
                
            .ClientEvents(clientEvents => clientEvents.OnDataBinding("onDataBinding"))
            .Scrollable(scrolling => scrolling.Height(200))
            .Pageable()
            .Filterable()
            .Sortable()
            .Selectable()
            )
            </td>
        <td>
            <h3>Detalles </h3>
            @(Html.Telerik().Grid(Model)
            .Name("Detalles")
            .Localizable("es-ES")
            .DataKeys(keys => keys.Add(c => c.ID))
                            .Editable(editing => editing
                            .Mode(GridEditMode.InLine)
                    ) 
            .Columns(columns=>
            {
                columns.ForeignKey(c => c.ProductoSID, (IEnumerable<ProductoView>)ViewData["DetalleProducto"], "ID", "Descripcion").Width(150);
                columns.ForeignKey(c => c.UnidadID, (IEnumerable<UnidadView>)ViewData["Unidades"], "ID", "descripcion").Width(50);
                columns.Bound(c => c.Cantidad).Width(40).Title("Cantidad");
                columns.Bound(c => c.PrecioVenta).Width(40).Title("P.U.");
                columns.Command(commands =>
                {
                    commands.Edit().ButtonType(GridButtonType.BareImage);
                    commands.Delete().ButtonType(GridButtonType.BareImage);
                }).Width(80).Title("Modificar");
            })
            .DataBinding(dataBinding => dataBinding
                .Ajax()
                .Select("ObtenerDetalles", "DetalleProducto")
                .Update("ModificarDetalle", "DetalleProducto")
                .Delete("EliminarDetalle", "DetalleProducto"))

            .ClientEvents(clientEvents => clientEvents.OnDataBinding("onDataBinding"))
            .Scrollable(scrolling => scrolling.Height(200))
            .Pageable()
            .Filterable()
            .Sortable()                    
            )
            </td>
    </tr>
</table>

</div>
